import React, { useState } from "react";
import logo from "../../../assets/images/login_hand_03.png";
import { NavLink,useNavigate } from "react-router-dom";
import { Form, Input, Button, Toast } from "antd-mobile";
import {
  MailOutline,
  LockOutline,
  EyeInvisibleOutline,
  EyeOutline,
} from "antd-mobile-icons";
import styles from "./login.scss";
import http from "../../../http";
import { encryptedData } from "../../../utils/pwdLock";

// 登录数据类型
interface loginRawState {
  email: string;
  pwd: string;
}

export default function Login() {
  const navigate=useNavigate()
  // 密码是否隐藏的变量
  const [visible, setVisible] = useState(false);
  // 提交表单
  const onFinish = (data: loginRawState) => {
    data.pwd=encryptedData(data.pwd) as string
    http
      .post("/health/user/v1/login", data, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
      .then((res:any) => {
        if (res.status != '0000') {
          Toast.show({
            icon: "fail",
            content: res.message,
          });
        } else {
          Toast.show({
            icon: "success",
            content: res.message,
          });
          
          navigate('/')
          
          localStorage.setItem('token',res.result.userName)
          localStorage.setItem('user',JSON.stringify(res.result))
        }
      });
  };
  return (
    <div className="Login">
      {/* logo标识 */}
      <img src={logo} alt="" className="logo" />
      {/* 登录表单 */}
      <div className="centerbox">
        <Form
          layout="horizontal"
          // 提交事件
          onFinish={onFinish}
          // 足部提交按钮
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <MailOutline
              style={{
                fontSize: 28,
                color: "gray",
                marginLeft: "20px",
              }}
            />
            <Form.Item
              name="email"
              style={{ width: "90%" }}
              // 正则校验
              rules={[
                { required: true, message: "邮箱不能为空" },
                {
                  pattern:
                    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                  message: "请输入正确邮箱",
                },
              ]}
            >
              <Input placeholder="请输入邮箱" style={{ width: "100%" }} />
            </Form.Item>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginLeft: "20px",
            }}
          >
            <LockOutline
              style={{
                fontSize: 28,
                color: "gray",
              }}
            />
            <Form.Item
              name="pwd"
              style={{ width: "90%" }}
              // 正则校验
              rules={[{ required: true, message: "密码不能为空" }]}
              extra={
                <div className={styles.eye}>
                  {/* 判断小眼睛 是否睁眼闭眼 */}
                  {!visible ? (
                    <EyeInvisibleOutline
                      onClick={() => setVisible(true)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  ) : (
                    <EyeOutline
                      onClick={() => setVisible(false)}
                      style={{ fontSize: 20, color: "gray" }}
                    />
                  )}
                </div>
              }
            >
              <Input
                placeholder="请输入密码"
                clearable
                // 转换隐藏
                type={visible ? "text" : "password"}
              />
            </Form.Item>
          </div>
        </Form>
        <div className="userOperation">
          <NavLink to="/user/forget">
            <span>忘记密码</span>
          </NavLink>
          <span>
            <NavLink to="/user/sigin">
              暂无账号?<span className="userOperation_fonsize">立即注册</span>
            </NavLink>
          </span>
        </div>
        {/* 渲染阴影 */}
        <div className="loginshadow_1">
          <div className="loginshadow_1"></div>
        </div>
      </div>
    </div>
  );
}
